<template>
  <el-container class="layout-container-demo">
    <el-header style="font-size: 12px">
      <!-- 点击进行菜单栏缩放 -->
      <div class="haedertitle">
        <h2>牛逼后台管理系统</h2>
        <el-icon
          @click="handleCollapse"
          size="20"
          color="#fff"
          style="margin-left: 8px"
        >
          <setting />
        </el-icon>
      </div>
      <div class="toolbar">
        <el-dropdown @command="onCommand">
          <el-icon style="margin-right: 8px; margin-top: 1px">
            <setting />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="goHome">首页</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span class="el-icon--right">{{ username }}</span>
      </div>
    </el-header>
    <el-container>
      <el-scrollbar>
        <el-menu
          background-color="rgb(50, 65, 87)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
          :default-openeds="['1', '3']"
          :collapse="isCollapse"
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/index">
            <!-- 一级菜单 -->
            <el-icon>
              <message />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu
            v-for="item in storeMenus"
            :key="item.id"
            :index="item.name"
          >
            <!-- 一级菜单 -->
            <template #title>
              <el-icon>
                <message />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group
              v-for="el in item.children"
              :key="el.id"
              v-show="el.hidden == 1 ? false : true"
            >
              <el-menu-item :index="'/' + item.name + '/' + el.name">{{
                el.title
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
      <el-main>
        <div class="bread">
          <BreadC></BreadC>
        </div>
        <div class="view">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { useMenusStroe } from "../stores/menus";
import { useUserInfoStore } from "../stores/userInfo";
import { useRouter, useRoute, RouterView } from "vue-router";
import Cookies from "js-cookie";
import * as api from "../request/api";
import BreadC from "../components/bread/index.vue";

// 默认的高亮菜单
let defaultActive = ref("/index");
// 我应该从 路由跳转 ，判断当前是在哪一个页面，从而知道菜单栏的子菜单应该谁要高亮
watch(
  useRoute(), // 类似于vue2 的 this.$route
  (newVal) => {
    // console.log(newVal);
    defaultActive.value = newVal.path;
  },
  {
    immediate: true,
  }
);

// 获取pinia的菜单栏数据
let menusStore = useMenusStroe();
let storeMenus = computed(() => {
  return menusStore.sortedMenus;
});
// console.log("storeMenus", storeMenus);

// console.log(menusStore);
//菜单栏
let isCollapse = ref(false);
let handleCollapse = () => {
  console.log(isCollapse.value);
  isCollapse.value = !isCollapse.value;
};

let username = ref("");
const userInfoStore = useUserInfoStore();
username.value = userInfoStore.username;
// 下拉菜单的单机事件
const router = useRouter();
let onCommand = (command: string | number | object) => {
  console.log(command);
  // 清空menus
  userInfoStore.updataUserInfo("", []);
  console.log("退出登录i");
  // 清空token
  Cookies.remove("token"); // 不删除 token  无法条找的登录页面
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.layout-container-demo {
  overflow: hidden;
}

.el-header {
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .haedertitle {
    display: flex;
    align-items: center;

    h2 {
      font-size: 24px;
      color: #fff;
      line-height: 60px;
    }
  }
}

.el-container {
  height: 100vh;
}

.el-menu {
  height: 120vh;

  .el-menu-item {
    width: 240px;
  }
}

// .el-menu-vertical-demo:not(.el-menu--collapse) {
//     width: 200px;
//     min-height: 400px;
// }

.el-main {
  height: 90%;
  position: relative;
  z-index: 1;
  padding-left: 0;

  .bread {
    position: fixed;
    top: 60px;
    z-index: 999;
    height: 50px;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    line-height: 50px;
    padding-left: 30px;
  }

  .view {
    padding-left: 30px;
  }
}
</style>
